import { ObjectDirective, DirectiveBinding } from 'vue'
import permissionHelper from '../permissionHelper'

/**
 * 角色指令
 * 用法：
 * v-role="'SUPER_ADMIN'" - 单个角色
 * v-role="['SUPER_ADMIN', 'TEACHER']" - 多个角色，满足其一即可
 * v-role.all="['SUPER_ADMIN', 'TEACHER']" - 多个角色，必须全部满足
 * v-role.except="'GUEST'" - 除了指定角色外都可见
 */
export const role: ObjectDirective = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value, modifiers } = binding
    
    try {
      // 超级管理员可以访问所有内容
      if (permissionHelper.isSuperAdmin()) {
        return // 超级管理员直接返回，不做角色检查
      }
      
      // 如果没有指定角色，则默认可见
      if (!value) return
      
      let hasRole = false
      
      // 排除模式 - 除了指定角色外都可见
      if (modifiers.except) {
        if (typeof value === 'string') {
          // 单个角色
          hasRole = !permissionHelper.hasRole(value)
        } else if (Array.isArray(value)) {
          // 多个角色
          hasRole = !permissionHelper.hasRole(value)
        }
      } else {
        // 普通模式
        if (typeof value === 'string') {
          // 单个角色
          hasRole = permissionHelper.hasRole(value)
        } else if (Array.isArray(value)) {
          // 多个角色
          if (modifiers.all) {
            // 必须全部满足
            hasRole = permissionHelper.hasAllRoles(value)
          } else {
            // 满足其一即可
            hasRole = permissionHelper.hasRole(value)
          }
        }
      }
      
      // 如果没有角色权限，则隐藏元素
      if (!hasRole) {
        el.style.display = 'none'
      }
    } catch (error) {
      console.error('角色指令执行失败:', error)
    }
  }
}

/**
 * 注册角色指令
 * @param app Vue应用实例
 */
export function setupRoleDirective(app: any) {
  app.directive('role', role)
} 